<template>
  <div class="Prefecture">

    <div class="home-box">
      <div class="brand-area">
        <mt-swipe :auto="4000">
          <mt-swipe-item class="slide">
            <a href="#">
              <img src="https://dummyimage.com/750x530" alt="">
            </a>
          </mt-swipe-item>
          <mt-swipe-item class="slide">
            <a href="#">
              <img src="https://dummyimage.com/750x530" alt="">
            </a>
          </mt-swipe-item>
          <mt-swipe-item class="slide">
            <a href="#">
              <img src="https://dummyimage.com/750x530" alt="">
            </a>
          </mt-swipe-item>
        </mt-swipe>
      </div>

      <div class="goddess-rec">
        <div class="rec-box">
          <ul class="rec-list clearfix">
            <li class="rec-li">
              <div class="img"><a href="#"><img src="https://dummyimage.com/335x400" alt=""></a></div>
              <div class="rec-t"><a href="#">【全新】gucci 鳄鱼皮墨绿色手拿包</a></div>
              <div class="price-b clearfix">
                <div class="fl"><span class="price">¥3999</span></div>
                <div class="fr">
                  <span class="shoucang"><img src="../assets/content/icoa3.png" alt=""></span>
                  <!--<span class="shoucang active"><img src="../assets/content/icoa3-ac.png" alt=""></span>-->
                </div>
              </div>
            </li>
            <li class="rec-li">
              <div class="img"><a href="#"><img src="https://dummyimage.com/335x400" alt=""></a></div>
              <div class="rec-t"><a href="#">【全新】gucci 鳄鱼皮墨绿色手拿包</a></div>
              <div class="price-b clearfix">
                <div class="fl"><span class="price">¥3999</span></div>
                <div class="fr">
                  <!--<span class="shoucang"><img src="../assets/content/icoa3.png" alt=""></span>-->
                  <span class="shoucang active"><img src="../assets/content/icoa3-ac.png" alt=""></span>
                </div>
              </div>
            </li>
            <li class="rec-li">
              <div class="img"><a href="#"><img src="https://dummyimage.com/335x400" alt=""></a></div>
              <div class="rec-t"><a href="#">【全新】gucci 鳄鱼皮墨绿色手拿包</a></div>
              <div class="price-b clearfix">
                <div class="fl"><span class="price">¥3999</span></div>
                <div class="fr">
                  <!--<span class="shoucang"><img src="../assets/content/icoa3.png" alt=""></span>-->
                  <span class="shoucang active"><img src="../assets/content/icoa3-ac.png" alt=""></span>
                </div>
              </div>
            </li>
            <li class="rec-li">
              <div class="img"><a href="#"><img src="https://dummyimage.com/335x400" alt=""></a></div>
              <div class="rec-t"><a href="#">【全新】gucci 鳄鱼皮墨绿色手拿包</a></div>
              <div class="price-b clearfix">
                <div class="fl"><span class="price">¥3999</span></div>
                <div class="fr">
                  <!--<span class="shoucang"><img src="../assets/content/icoa3.png" alt=""></span>-->
                  <span class="shoucang active"><img src="../assets/content/icoa3-ac.png" alt=""></span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>


    </div>


  </div>
</template>


<script>
//  import footGuide from '../components/footGuide';

  export default {
    name: 'Prefecture',
    data () {
      return {
      }
    },
    components: {

    },
    methods: {
      gotoAddress(path){
        this.$router.push(path)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .mint-swipe {
    height: 11.3rem;
    color: #fff;
    font-size: 30px;
    text-align: center;

    background: #fff;
  }
  .slide {
    background-color: #0089dc;
    color: #fff;
  }
  .slide img{
    width: 100%;
  }
  .goddess-rec{
    background: #fff;
    margin-top: .5rem;
    padding-left: .23rem;
    padding-bottom: .5rem;
    color: #707070;
  }
  .goddess-rec .tt{
    text-align: center;
    padding: .5rem 0 .2rem;
  }
  .goddess-rec .tt span{
    display: inline-block;
    background: #ff7b80;
    color: #fff;
    padding: .1rem .3rem;
  }
  .goddess-rec .rec-li{
    float: left;
    width: 7rem;
    margin-left: .5rem;
    margin-top: .5rem;

  }
  .goddess-rec .rec-li .img img{
    width: 100%;
  }
  .goddess-rec a{
    color: #707070;
  }
  .goddess-rec .rec-t{
    padding-top: .2rem;
  }
  .goddess-rec .guanzhu{

  }
  .goddess-rec .shoucang img{
    width: .7rem;
  }
  .goddess-rec .fr{
    padding-right: .2rem;
  }

</style>
